<template>
  <div>
    <breadcrumb></breadcrumb>
    <div class="control">
      <!-- 车牌号 -->
      <div class="inputItem">
        <div class="title">企业全称</div>
        <div class="inputBox">
          <el-input v-model="enterpriseName" @keyup.enter.native="searchList">
          </el-input>
        </div>
      </div>
      <!-- 查询 -->
      <el-button type="primary" size="small" icon="el-icon-search" @click="searchList">查询</el-button>
      <el-button type="plain" size="small" icon="el-icon-refresh-right" @click="CleanUp">清空</el-button>
    </div>
    <!-- 列表 -->
    <div class="main">
      <div class="main_head">
        <div class="main_head_left">
          已选择<span style="color: #1890ff">{{ selectionLegth }}</span>项
        </div>
        <div class="main_head_right">
          <button v-if="permissions.insert.perms != null" class="addCargoOwner"
            @click="$router.push('/Carrier/acceptCarriage/AddCargoOwner')">
            <i class="el-icon-plus iconBtn"></i>
            <span>新增货主</span>
          </button>
          <el-select class="selector" v-model="operateValue" placeholder="批量操作" size="small" @change="BatchOperation">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="list">
        <el-table :data="records" style="width: 100%" @selection-change="handleSelectionChange" header-align="center"
          ref="table">
          <el-table-column align="center" type="selection" width="50"></el-table-column>
          <el-table-column align="center" prop="SerialNumber" width="80" label="序号">
          </el-table-column>
          <el-table-column align="center" prop="name" label="企业全称"></el-table-column>
          <el-table-column align="center" prop="abbreviation" label="企业简称"></el-table-column>
          <el-table-column align="center" prop="location" label="所属地区">
          </el-table-column>
          <el-table-column align="center" prop="headName" label="联系人">
          </el-table-column>

          <el-table-column align="center" prop="headTel" label="联系电话">
          </el-table-column>
          <el-table-column align="center" prop="comCreateTime" label="成立时间">
          </el-table-column>
          <el-table-column align="center" label="操作" width="153">
            <template slot-scope="scope">
              <div>
                <el-button type="text" size="small" v-if="permissions.getDetails.perms != null" @click="
                  $router.push(
                    '/Carrier/acceptCarriage/details/' + scope.row.ownerId
                  )
                  ">详情</el-button>
                <el-button type="text" size="small" v-if="permissions.update.perms != null" @click="
                  $router.push({
                    path: '/Carrier/acceptCarriage/AddCargoOwner',
                    query: { ownerId: scope.row.ownerId },
                  })
                  ">编辑</el-button>
                <el-button type="text" size="small" v-if="permissions.delete.perms != null"
                  @click="DeleteItem(scope.row.ownerId)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="paginationBox">
        <el-pagination @current-change="changePages($event)" class="pagination" background layout="slot,prev, pager, next"
          :total="data.total * 1" :page-size="data.size * 1" :pager-count="5">
          <template slot>
            <span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">共{{ data.total }}条,每页{{ data.size }}条</span>
          </template>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import breadcrumb from "@/components/breadcrumb.vue";
import httpApi from "@/http";
export default {
  data() {
    return {
      records: [],
      data: {},
      options: [
        {
          value: "1",
          label: "批量删除",
        },
      ],
      operateValue: "",
      enterpriseName: "", //企业名称 值
      pageCurrent: "1", //当前页
      pageSize: "10", //每页10条
      multipleSelection: "", //多选
      selectionLegth: 0,
      permissions: {},
    };
  },
  created() {
    this.permissions = JSON.parse(sessionStorage.getItem("permissions"));
    console.log(this.permissions);
  },
  methods: {
    BatchOperation(val) {
      // console.log(val);
      if (val == "批量删除") {
        this.$confirm("此操作将批量删除该数据, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // 发起批量删除请求,
            if (this.multipleSelection != "") {
              let params = {
                ownerId: this.multipleSelection,
              };
              httpApi.cargoOwnerApi
                .deleteBatchCargoOwner(params)
                .then((res) => {
                  // console.log("批量删除", res);
                  if (res.data.code == 200) {
                    this.getList(); //删除后 更新列表数据
                    this.$message({
                      type: "success",
                      message: "批量删除成功!",
                    });
                  }
                });
            } else if (this.multipleSelection == "") {
              this.$message.warning("请选择删除项");
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
        this.operateValue = "批量操作"; //重置
      }
    },
    DeleteItem(ownerId) {
      this.$confirm("此操作将删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 发起单个删除请求

          httpApi.cargoOwnerApi
            .deleteSingleCargoOwner({ ownerId: ownerId })
            .then((res) => {
              // console.log("删除结果", res);
              if (res.data.code == 200) {
                this.getList(); //删除后 更新列表数据
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    getList() {
      let params = {
        current: this.pageCurrent,
        size: this.pageSize,
        name: this.enterpriseName,
      };
      // console.log(params);
      httpApi.cargoOwnerApi.getAcceptCarriageList(params).then((res) => {
        // console.log("列表", res);
        this.records = res.data.data.records;

        this.data = res.data.data;
        // 前端解决序号
        this.records.forEach((item, i) => {
          let num = i + 1 + Number(this.pageSize) * (this.pageCurrent - 1);
          item.SerialNumber = num;
        });
        // console.log(res.data.data.records);
      });
    },
    init() {
      this.getList();
    },
    searchList() {
		this.pageCurrent = 1;
      this.getList();
    },
    CleanUp() {
      this.enterpriseName = "";
      this.getList();
    },
    changePages(val) {
      //页码变化时
      this.pageCurrent = val.toString();
      this.getList();
    },
    // 列表数据选择变化时
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log("批量选择", this.multipleSelection);
      let ownerIdArr = [];
      this.multipleSelection.forEach((item) => {
        ownerIdArr.push(item.ownerId);
      });
      this.multipleSelection = ownerIdArr.join(",");
      this.selectionLegth = ownerIdArr.length;
      // console.log("批量删除选择数据", this.multipleSelection);
    },
    // 记录滚动距离
    scrollEvent(res) {
      this.$route.meta.scrollTop = res.target.scrollTop
    },
  },
  activated() {
    //组件激活时监听表格滚动条位置,
    this.$refs.table.bodyWrapper.addEventListener('scroll', this.scrollEvent, false)
    // 激活设置滚动位置
    this.$refs.table.bodyWrapper.scrollTop = this.$route.meta.scrollTop
  },
  beforeRouteLeave(to, from, next) {
    // 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
    this.$refs.table.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
    next()
  },


  mounted() {
    this.init();
  },
  components: {
    breadcrumb,
  },
};
</script>

<style lang="scss" scoped>
.control {
  height: 76px;
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 29px;
  margin-bottom: 8px;

  .inputItem {
    display: flex;
    align-items: center;
    margin-right: 23px;

    >.title {
      color: #262626;
      font-size: 12px;
      margin-right: 7px;
    }

    >.inputBox {
      width: 160px;

      ::v-deep .el-input__inner {
        height: 32px;
        font-size: 12px;
      }

      ::v-deep .el-input__inner::placeholder {
        color: #c3c3c3;
        font-size: 12px;
      }
    }
  }
}

.main {
  width: 100%;
  height: calc(100vh - 212px);
  background-color: #fff;
  padding: 0px 30px 0px 30px;

  .main_head {
    display: flex;
    justify-content: space-between;
    height: 64px;
    align-items: center;

    .main_head_left {
      font-size: 12px;
      color: #262626;
    }

    .main_head_right {
      .addCargoOwner {
        background-color: #1890ff;
        border-radius: 4px;
        height: 32px;
        color: #ffffff;
        font-size: 12px;
        padding: 8px 17px 9px 17px;
        transition: 0.2s;
        cursor: pointer;
        margin-right: 17px;

        .iconBtn {
          margin-right: 7px;
          font-size: 15px;
        }

        &:hover {
          opacity: 0.8;
        }
      }

      .selector {
        width: 105px;
        height: 32px;
        color: #262626;
        font-size: 12px;
      }
    }
  }

  .list {
    height: calc(100% - 112px);

    ::v-deep .el-table__body-wrapper {
      height: calc(100vh - 373px) !important;
      overflow-y: scroll;
    }

    // 表头样式

    ::v-deep .el-table__header th {
      background-color: #f0f6fd;
      color: #262626;
      font-size: 12px;
      font-weight: bold;
      text-align: center;
      height: 48px;

      // 表 body的td
      ::v-deep .el-table__body td {
        color: #595959;
        font-size: 12px;
        height: 48px;
      }
    }

    .stateBtns {
      height: 30px;

      ::v-deep .el-button {
        font-size: 12px;
        border: none;
        width: 76px;
        height: 30px;
        margin: 0 auto;
        box-sizing: border-box;
      }

      .icon-dian {
        font-size: 12px;
      }

      .Pass {
        background-color: #ecf5fe;
        color: #1890ff;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 10px 9px;
      }

      .noPass {
        background-color: #fde8e9;
        color: #f7555d;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .paginationBox {
    width: 100%;
    background-color: #fff;
    display: flex;
    height: 48px;
    align-items: center;

    .pagination {
      margin-left: auto;
    }
  }
}
</style>
